<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
<span id="sp"><font color="orange">健哥最帅</font> </span>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
姓名：<input type="text" name="username" value="张三"/><br>
<button type="button" id="show">显示</button>
<button type="button" id="hide">隐藏</button>
<button type="button" id="delete">删除</button>
<a href="http://www.baidu.com">跳转到百度</a>
    <script type="text/javascript">
        $(function () {
            // alert("这是jquery的hello world")
            //通过id获取元素
            //     alert($("#sp").text);
            //     //标签元素选择器
            //     alert($("span").text);
            //     //隐藏所有的p标签
            //     $("p").hide();
            //     $("#show").click(function () {
            //         //显示所有的p标签
            //         $("p").show();
            //     })

            // $("#hide").click(function () {
            //     $("p").hide();
            // });

            //姓名输出框的内容改变事件
            // $("#username").change(function () {
            //     alert("姓名输入框的内容改变了")
            // });

            //获取表单元素value的值。使用val（）方法可以获取到输入框的值，值为张三
            // alert($("[name='username']").val());

            //获取p标签中的文本内容
            // alert($("p").text());

            //获取p标签的html整个元素
            // $("#sp").html("<font color=\"orange\">健哥最帅</font>");

            //
            $("a").attr("href","http://www.jd.com");
            $("a").text("跳转到京东");

            $("[name='username']").change(function () {
                alert("姓名输入框的的内容改变了")
            });
            //显示
            $("#show").click(function () {
                //淡入
                $("p").fadeIn("slow");
            });
            //隐藏
            $("#hide").click(function () {
                //淡出
                $("p").fadeOut("slow")
            });

            //点击删除按钮，删除span元素
            $("#delete").click(function () {
                $("#sp").remove();
            })

        });


    </script>
</body>
</html>